<template>
  <v-container class="my-8">
    <v-row class="text-center mb-6">
      <v-col cols="12">
        <h2 class="text-h4 font-weight-bold mb-4 fade-in-up" :class="{active: sectionVisible}">{{ $t('applications.title') }}</h2>
        <p class="text-subtitle-1 fade-in-up" :class="{active: sectionVisible}" style="animation-delay: 0.2s">{{ $t('applications.subtitle') }}</p>
      </v-col>
    </v-row>
    
    <!-- 应用领域内容展示 -->
    <v-row class="mb-6">
      <v-col cols="12" md="4" class="d-flex align-center">
        <div class="application-content fade-in-left" :class="{active: sectionVisible}">
          <h3 class="text-h5 font-weight-bold mb-4 primary--text">{{ currentApplication.title }}</h3>
          <p class="text-body-1 mb-4">{{ currentApplication.description }}</p>
          <div class="application-features">
            <v-chip
              v-for="(feature, index) in currentApplication.features"
              :key="index"
              class="ma-1 feature-chip"
              color="primary"
              variant="outlined"
              :style="{animationDelay: `${0.1 * index}s`}"
            >
              {{ feature }}
            </v-chip>
          </div>
        </div>
      </v-col>
      <v-col cols="12" md="6">
        <div class="application-image-container fade-in-right" :class="{active: sectionVisible}">
          <v-img
            :src="currentApplication.image"
            height="400"
            cover
            class="application-image"
          >
            <div class="image-overlay">
              <v-icon size="64" color="white" class="pulse-icon">{{ currentApplication.icon }}</v-icon>
            </div>
          </v-img>
        </div>
      </v-col>
    </v-row>
    
    <!-- 应用领域切换按钮 -->
    <v-row class="justify-center">
      <v-col cols="12">
        <div class="application-tabs-wrapper">
          <div 
            class="application-tabs-container"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            ref="tabsContainer"
          >
            <div class="application-tabs d-flex gap-2">
              <v-btn
                v-for="(app, index) in applications"
                :key="index"
                :color="currentAppIndex === index ? 'primary' : 'grey-lighten-2'"
                :variant="currentAppIndex === index ? 'flat' : 'outlined'"
                class="application-tab-btn"
                :class="{
                  'active-tab': currentAppIndex === index,
                  'fade-in-up': sectionVisible,
                  'active': sectionVisible
                }"
                :style="{animationDelay: `${0.1 * index}s`}"
                @click="switchApplication(index)"
                size="small"
                density="compact"
              >
                <v-icon size="16" class="mr-1">{{ app.icon }}</v-icon>
                <span class="btn-text">{{ app.title }}</span>
              </v-btn>
            </div>
          </div>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
// 直接导入语言文件作为备用
import zhMessages from '@/locales/zh.js'
import enMessages from '@/locales/en.js'

export default {
  name: 'ApplicationFields',
  data() {
    return {
      sectionVisible: false,
      currentAppIndex: 0,
      touchStartX: 0,
      touchStartY: 0,
      isScrolling: false
    }
  },
  computed: {
    applications() {
      try {
        // 获取当前语言
        const currentLocale = this.$i18n?.locale?.value || this.$i18n?.locale || 'en';
        console.log('当前语言:', currentLocale);
        
        // 优先使用 i18n 实例
        let messages = null;
        if (this.$i18n && this.$i18n.messages && this.$i18n.messages[currentLocale]) {
          messages = this.$i18n.messages[currentLocale];
          console.log('✅ 使用 i18n 实例的消息');
        } else {
          // 备用：直接使用导入的消息
          messages = currentLocale === 'zh' ? zhMessages : enMessages;
          console.log('✅ 使用直接导入的消息');
        }
        
        if (!messages || !messages.applications || !messages.applications.fields) {
          console.error('❌ 无法获取应用领域数据');
          return [];
        }
        
        const fields = messages.applications.fields;
        
        const applicationsList = [
          {
            title: fields.metalworking?.title || 'Metal Processing & Manufacturing',
            icon: 'mdi-factory',
            image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800',
            description: fields.metalworking?.description || 'Industrial gases for manufacturing processes',
            features: fields.metalworking?.features || []
          },
          {
            title: fields.medical?.title || 'Medical & Scientific Research',
            icon: 'mdi-hospital-box',
            image: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=800',
            description: fields.medical?.description || 'Medical-grade gases for healthcare',
            features: fields.medical?.features || []
          },
          {
            title: fields.food?.title || 'Food & Transportation',
            icon: 'mdi-truck-fast',
            image: 'https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?w=800',
            description: fields.food?.description || 'Gases for food preservation and transport',
            features: fields.food?.features || []
          },
          {
            title: fields.petrochemical?.title || 'Petrochemical Industry',
            icon: 'mdi-oil',
            image: 'https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=800',
            description: fields.petrochemical?.description || 'Specialty gases for petrochemical processes',
            features: fields.petrochemical?.features || []
          },
          {
            title: fields.laboratory?.title || 'Laboratory & University',
            icon: 'mdi-school',
            image: 'https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=800',
            description: fields.laboratory?.description || 'High-purity gases for research',
            features: fields.laboratory?.features || []
          },
          {
            title: fields.optoelectronics?.title || 'Optoelectronics & Energy',
            icon: 'mdi-lightning-bolt',
            image: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?w=800',
            description: fields.optoelectronics?.description || 'Gases for high-tech industries',
            features: fields.optoelectronics?.features || []
          }
        ];
        
        console.log('✅ 获取到', applicationsList.length, '个应用领域');
        return applicationsList;
        
      } catch (error) {
        console.error('❌ applications 计算属性错误:', error);
        return [];
      }
    },
    currentApplication() {
      if (!this.applications || this.applications.length === 0) {
        return {
          title: this.$i18n && this.$i18n.locale === 'zh' ? '加载中...' : 'Loading...',
          description: this.$i18n && this.$i18n.locale === 'zh' ? '正在加载应用信息...' : 'Loading application information...',
          features: [],
          icon: 'mdi-loading',
          image: ''
        };
      }
      
      const index = this.currentAppIndex >= 0 && this.currentAppIndex < this.applications.length 
        ? this.currentAppIndex 
        : 0;
        
      return this.applications[index] || {
        title: this.$i18n && this.$i18n.locale === 'zh' ? '加载中...' : 'Loading...',
        description: this.$i18n && this.$i18n.locale === 'zh' ? '正在加载应用信息...' : 'Loading application information...',
        features: [],
        icon: 'mdi-loading',
        image: ''
      };
    }
  },
  mounted() {
    this.sectionVisible = true;
    this.startAutoSwitch();
    
    // 添加延迟刷新以确保数据加载
    setTimeout(() => {
      this.$forceUpdate();
    }, 100);
  },
  methods: {
    switchApplication(index) {
      if (index !== this.currentAppIndex) {
        this.currentAppIndex = index;
        
        const btn = event.target.closest('.application-tab-btn');
        btn.classList.add('clicked');
        setTimeout(() => {
          btn.classList.remove('clicked');
        }, 300);
      }
    },
    startAutoSwitch() {
      setInterval(() => {
        this.currentAppIndex = (this.currentAppIndex + 1) % this.applications.length;
      }, 8000);
    },
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
      this.isScrolling = false;
    },
    handleTouchMove(e) {
      if (!this.touchStartX || !this.touchStartY) return;
      
      const touchX = e.touches[0].clientX;
      const touchY = e.touches[0].clientY;
      const diffX = Math.abs(touchX - this.touchStartX);
      const diffY = Math.abs(touchY - this.touchStartY);
      
      if (diffX > diffY && diffX > 10) {
        e.preventDefault();
        this.isScrolling = true;
      }
    },
    handleTouchEnd() {
      this.touchStartX = null;
      this.touchStartY = null;
      this.isScrolling = false;
    }
  }
}
</script>

<style scoped>
/* 应用领域相关样式 */
.application-content {
  padding: 2rem;
}

.application-image-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.application-image {
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.application-image:hover {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.3) 0%, rgba(25, 118, 210, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.application-image-container:hover .image-overlay {
  opacity: 1;
}

.pulse-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-in-up.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease;
}

.fade-in-left.active {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease;
}

.fade-in-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* 应用领域切换按钮样式 */
.application-tabs-wrapper {
  width: 100%;
  padding: 0 1rem;
  position: relative;
}

.application-tabs-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.application-tabs-container::-webkit-scrollbar {
  display: none;
}

.application-tabs {
  width: max-content;
  min-width: 100%;
  justify-content: center;
  padding: 0;
  touch-action: pan-x;
  gap: 12px !important; /* 增加按钮间距 */
}

.application-tab-btn {
  margin: 0 6px; /* 添加左右边距 */
  padding: 0 16px !important; /* 增加内边距 */
  height: 36px !important; /* 稍微增加高度 */
  min-width: auto;
  white-space: nowrap;
  border-radius: 18px; /* 调整圆角 */
  font-size: 0.8rem; /* 稍微增大字体 */
  flex-shrink: 0;
  transition: all 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  box-sizing: border-box; /* 确保边框不影响布局 */
}

.application-tab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
  z-index: 1; /* 悬停时提升层级 */
}

.application-tab-btn.active-tab {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
  z-index: 2; /* 激活状态提升层级 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .application-tabs {
    gap: 8px !important;
  }
  
  .application-tab-btn {
    margin: 0 4px;
    padding: 0 12px !important;
    height: 32px !important;
    font-size: 0.75rem;
  }
}

/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {
  .application-tabs {
    gap: 10px !important;
  }
  
  .application-tab-btn {
    margin: 0 5px;
    padding: 0 14px !important;
    height: 34px !important;
  }
}
.application-tab-btn.clicked {
  animation: clickPulse 0.3s ease;
}

@keyframes clickPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}
</style>